<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
    <div class="toolbar">
      <p class="txt">height</p>
      <input id='s1' name='s1' type='range' min="-100" max="100" step="1"> </input>
      <button type="button" @click="okClick">测试的</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cesiumviewer",
    data() {
      return {};
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //   url:
        //     "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        // })
      });
      // 不加载默认bing的卫星图
      //this.viewer.imageryLayers.get(0).show = false;
      //设置版权等信息不显示
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      //根据太阳位置开启照明
      this.viewer.scene.globe.enableLighting = true;


      //设置初始位置
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(113.6, 22.7, 6500),

        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-45),
          roll: 0
        }
      });

      let url = '../../../static/models/Cesium_Air.glb'
      let orientation = {
        heading: 0,
        pitch: 0,
        roll: 0
      }
      let position = Cesium.Cartesian3.fromDegrees(113.6, 22.8, 5500)
      let entity = this.viewer.entities.add({
        id: 0,
        name: url,
        position: position,
        // orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000
        }
      });
      this.viewer.trackedEntity = entity;

      let viw = this.viewer
      var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction(function(movement) {
        var pick = viw.scene.pick(movement.position);
        console.log('pick 啥？')
        if (Cesium.defined(pick) && (pick.id.id === 0)) {
          console.log('选中了', url)
        } else {
          console.log('没有选中')
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    },

    methods: {
      okClick() {
        console.log('ok。。。')
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url(../../node_modules/cesium/Build/Cesium/Widgets/widgets.css);

  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }

  .toolbar {
    background: rgba(42, 42, 42, 0.7);
    margin-top: 10px;
    padding: 4px;
    border-radius: 4px;
    z-index: 10;
    position: relative;
    width: 200px;
    height: 100px;
    color: white;
    font-weight: bold;
  }


  .cesium-widget-credits {
    display: none !important;
    visibility: hide !important;
  }
</style>
